<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta content="telephone=no" name="format-detection"/>
    <meta content="email=no" name="format-detection"/>
    <title>选择身份</title>
    <script type="text/javascript" src="js/rem_2.js"></script>
    <link rel="stylesheet" href="css/choiceIdentity.css"/>
</head>
<body>
<div class="g-container choiceIdentityContainer">
    <div class="typeImg typeImgInit"></div>
    <div class="circle"></div>
    <div class="g-selectBox">
        <div class="inner">
            <div class="selectedTxt">请选择您的身份</div>
            <select name="" id="" class="selectBox selectId">
                <option value="">请选择您的身份</option>
                <option value="1">影院用户</option>
                <option value="2">非影院用户</option>
                <option value="3">工程师用户</option>
            </select>
        </div>
    </div>
    <!--认证码-start-->
    <div class="g-inputBox authenticationCodeBox g-hide">
        <div class="inner">
            <input type="text" class="inputBox authenticationCode" value="" placeholder="请输入9位认证码">
        </div>
    </div>
    <!--认证码-end-->
    <div class="submitBtn">下一步</div>
</div>
<!--弹窗提示-->
<div class="g-tip g-errorTip g-hide">手机号码格式错误</div>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
    var $submitBtn,$selectedTxt,$codeBox,$selectBox;
    $submitBtn=$(".submitBtn")
    $selectedTxt=$(".selectedTxt")
    $codeBox=$(".authenticationCodeBox")
    $selectBox=$(".g-selectBox")
    $(".selectId").change(function () {
        var thisTxt,thisVal;
        thisTxt=$(this).find("option:selected").text()
        thisVal=$(this).val()
        $(".selectedTxt").html(thisTxt)
        if(thisVal==1){
            $(".typeImg").removeClass("typeImgInit typeImg2 typeImg3").addClass("typeImg1")
            $codeBox.addClass("g-hide")
            $selectBox.removeClass("gcs")
        }else if(thisVal == 2){
            $(".typeImg").removeClass("typeImgInit typeImg1 typeImg3").addClass("typeImg2")
            $codeBox.addClass("g-hide")
            $selectBox.removeClass("gcs")
        }else if(thisVal == 3){
            $(".typeImg").removeClass("typeImgInit typeImg1 typeImg2").addClass("typeImg3")
            $codeBox.removeClass("g-hide")
            $selectBox.addClass("gcs")
        }else if(thisVal ==''){
            $(".typeImg").removeClass("typeImg1 typeImg2 typeImg3").addClass("typeImgInit")
            $codeBox.addClass("g-hide")
            $selectBox.removeClass("gcs")
        }

        if(thisVal !=''){
            $selectedTxt.addClass("active")
            if(thisVal !=3){
                $submitBtn.addClass("active")
            }else {
                if($(".authenticationCode").val()){
                    $submitBtn.addClass("active")
                }else {
                    $submitBtn.removeClass("active")
                }
            }
        }else {
            $submitBtn.removeClass("active")
            $selectedTxt.removeClass("active")
        }


    })
    $(".authenticationCode").keyup(function () {
        var $this,thisVal;
        $this=$(this)
        thisVal=$this.val()
        if(thisVal){
            $submitBtn.addClass("active")
        }else {
            $submitBtn.removeClass("active")
        }
    })

    $submitBtn.click(function () {
        if($submitBtn.hasClass("active")){
            /**
             * ajax请求--start
             * */
        }
    })
</script>
</body>
</html>